<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <connon-head></connon-head>
    </div>

    <!-- <script id="tpl" type="text/html">
         <div>
         <div>我是div标签</div>
         {{ msg }}
         {{ reversedMsg}}
         <logo></logo>
         </div>
    </script> -->

    <!-- <template id="tpl">
        <div>
            <div>我是div标签</div>
            {{ msg }}
            {{ reversedMsg}}
            <logo></logo>
            </div>

    </template> -->

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.13/dist/vue.js"></script>
    <script>
        const Logo = {
            // props:['name','age'],
            props:{
                name:String,
                age:{
                    type:[Number,String],
                    requird:true
                },
                gender:{
                    type:String,
                    default:'男'
                },
                a:{
                    type:Array,
                    default:()=>[1,2,3]
                }
            },
            template: `
            <h3>
                我是子组件
                {{ name }}
                {{ age }}
                {{ gender}}
                {{ a}}
                <button v-for="item in a" :key='item'>
                    {{ item}}
                    </button>
            </h3>
            `
        }


        const ConnonHead = {
            template: 
             `
            <div>
            <div>我是div标签</div>
            {{ msg }}
            {{ reversedMsg}}
            <logo name="我是父组件传过来的" :age="msg" ></logo>
            </div>

            `   
            ,
            components: {
                Logo: Logo


            },
            data() {
                return {
                    msg: '你是我是msg'
                }
            },
            computed: {
                reversedMsg() {
                    return this.msg.split('').reverse().join('')
                }
            }

        }
        Vue.component('ConnonHead', ConnonHead)
        var vm = new Vue({
            el: "#app"
        })
    </script>

</body>

</html>